<!DOCTYPE html>
<html ng-app="demoApp">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/leaflet/dist/leaflet.js"></script>
    <script src="../bower_components/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
    <script src="../dist/angular-leaflet-directive_dev_mapped.js"></script>
    <link rel="stylesheet" href="../bower_components/leaflet/dist/leaflet.css" />
    <link rel="stylesheet" href="../bower_components/leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        div{
            margin:10px;
        }
    </style>
    <script>
        angular.module('demoApp', ['leaflet-directive'])
        .controller('Ctrl', ['$scope', 'leafletData', '$timeout', function($scope, leafletData, $timeout) {
            angular.extend($scope, {
                center: {
                    lat: 48.879633,
                    lng: 2.331717,
                    zoom: 14
                },
                layers: {
                    baselayers: {
                        osm: {
                            name: 'OpenStreetMap',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            type: 'xyz'
                        }
                    },
                    overlays: {
                        mapdescription: {
                            name: 'Markers added',
                            type: 'group',
                            visible: true
                        },
                        points: {
                            name: 'Points of interest',
                            type: 'group',
                            visible: true
                        }
                    }
                },
                defaultIcon: {},
                markers: {
                    "mapdescription": [],
                    "points": [{
                        "layer": "points",
                        "lat": 48.879633,
                        "lng": 2.331717,
                        "message": "MALL 1"
                    }, {
                        "layer": "points",
                        "lat": 48.879318,
                        "lng": 2.33151,
                        "message": "MALL 2"
                    }]
                }
            });

            $timeout(function(){
                //move a point to see if it moves on the map
                $scope.markers.points[1] = {
                    layer: "points",
                    lat: 48.889318,
                    lng: 2.33151,
                    message: "MALL 2"
                };
            },2000);

            $scope.$on("leafletDirectiveMap.click", function(event, args) {
                if(args.model.mapId != 'map1') return;
                var leafEvent = args.leafletEvent;
                // console.log("before", $scope.markers.mapdescription, $scope.markers.points);
                $scope.markers.mapdescription.push({
                    layer: 'mapdescription',
                    lat: leafEvent.latlng.lat,
                    lng: leafEvent.latlng.lng,
                    draggable: true,
                    icon: ''
                });
                // console.log("after", $scope.markers.mapdescription, $scope.markers.points);

            });

            $scope.$on("leafletDirectiveMarker.contextmenu", function(event, args) {
                var marker_index = parseInt(args.modelName.replace('mapdescription.', ''));
                $scope.markers.mapdescription.splice(marker_index, 1);

            });


        }])
        .controller('Ctrl2', ['$scope', 'leafletData', function($scope, leafletData) {
            angular.extend($scope, {
                center: {
                    lat: 48.879633,
                    lng: 2.331717,
                    zoom: 15
                },
                layers: {
                    baselayers: {
                        osm: {
                            name: 'OpenStreetMap',
                            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                            type: 'xyz'
                        }
                    }
                },
                defaultIcon: {},
                markers:  [{
                        "lat": 48.879633,
                        "lng": 2.331717,
                        "message": "MALL 1"
                    }, {
                        "lat": 48.879318,
                        "lng": 2.33151,
                        "message": "MALL 2"
                }]
            });

            $scope.$on("leafletDirectiveMap.click", function(event, args) {
                if(args.model.mapId != 'map2') return;
                var leafEvent = args.leafletEvent;

                $scope.markers.push({
                    lat: leafEvent.latlng.lat,
                    lng: leafEvent.latlng.lng,
                    draggable: true,
                    icon: ''
                });

            });


        }]);
    </script>
</head>

<body >
    <div ng-controller="Ctrl">
        <leaflet id="map1" width="100%" height="480px" lf-center="center" markers="markers" markers-nested="true" layers="layers"></leaflet>
    </div>
    <div ng-controller="Ctrl2">
        <leaflet id="map2" width="100%" height="480px" lf-center="center" markers="markers" layers="layers"></leaflet>
    </div>

</body>

</html>
